<%@ page pageEncoding="UTF-8" %>
<%@ include file="common/global.jsp" %>
<head>
    <%@ include file="common/meta.jsp" %>
    <title><f:message key="common.title"/> - <f:message key="menu.sample_pages.gallery"/></title>
    <%@ include file="common/css.jsp" %>
    <link href="${BASE}/www/js/plugins/lightbox/themes/evolution-dark/jquery.lightbox.css" rel="stylesheet">
</head>

<body>

<div id="wrapper">


<%@ include file="common/topbar.jsp" %>
<%@ include file="common/header.jsp" %>
<div id="masthead">

    <div class="container">

        <div class="masthead-pad">

            <div class="masthead-text">
                <h2>Image Gallery</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div> <!-- /.masthead-text -->

        </div>

    </div> <!-- /.container -->

</div> <!-- /#masthead -->
<div id="content">

<div class="container">


<div class="row">

    <div class="span12">

        <br />


        <ul class="gallery-container">

            <li>
                <a href="${BASE}/www/img/gallery/lr1_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr1.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr1_large.png" class="preview"></a>
            </li>

            <li>
                <a href="${BASE}/www/img/gallery/lr2_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr2.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr3.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr4.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr5_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr5.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr5_large.png" class="preview"></a>

            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr2.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="preview"></a>

            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr3.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr1_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr1.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr1_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr2.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="preview"></a>

            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr3.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr4.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr5_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr5.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr5_large.png" class="preview"></a>

            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr2.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="preview"></a>

            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr3.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr4.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr3.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr1_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr1.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr1_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr2.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr2_large.png" class="preview"></a>

            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr3.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr3_large.png" class="preview"></a>
            </li>

            <li>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="ui-lightbox">
                    <img src="${BASE}/www/img/gallery/lr4.png" alt="" />
                </a>

                <a href="${BASE}/www/img/gallery/lr4_large.png" class="preview"></a>
            </li>

        </ul>

    </div> <!-- /.span12 -->

</div> <!-- /.row -->

</div> <!-- /.container -->

</div> <!-- /#content -->

</div> <!-- /#wrapper -->



<%@ include file="common/footer.jsp" %>
<%@ include file="common/js.jsp" %>

<script src="${BASE}/www/js/plugins/hoverIntent/jquery.hoverIntent.minified.js"></script>
<script src="${BASE}/www//js/plugins/lightbox/jquery.lightbox.js"></script>
<script src="${BASE}/www/js/demos/demo.gallery.js"></script>



<script>
    $(function () {
        if ($.fn.lightbox) {
            $('.ui-lightbox').lightbox();
        }

        if ($.fn.cirque) {
            $('.ui-cirque').cirque ({  });
        }

        $('#wrapper').append ('<div class="push"></div>');

        $("#nav3").addClass("active").sibling.removeClass("active");
    });
</script>

</body>
</html>